<style lang="less">
  .div-wrap{
    flex: 1;
    display: flex;
    flex-direction: column;
    .el-table{
      flex: 1;
    }
    .border-card {
      margin-top: 20px;
    }
    .f-mt10 {
      margin-top: 10px;
    }
    .zcqd {
      .xx {
        .el-row {
          padding-bottom: 10px;
        }
      }
      .ss {
        margin: 5px 0 5px 0;
      }
      .bz {
        border-bottom: 1px solid #dfe6ec;
      }
      .tj {
        text-align: center;
        border-right: 1px solid #dfe6ec;
        border-top: 1px solid #dfe6ec;
        .bg-purple-light {
          margin: 0;
          font-weight: bold;
        }
        .bg-purple {
          padding: 10px;
        }
        .el-col {
          border-left: 1px solid #dfe6ec;
          border-bottom: 1px solid #dfe6ec;
        }
      }
    }
    /*合计栏*/
    .total-list {
      margin-top: 10px;
      margin-bottom: 10px;
      font-weight: 800;
    }
    .font-color {
      color: orangered;
    }
    .search-bar {
      height: 120px;
      padding: 10px;
      overflow: hidden;
      margin: 0px 0px 10px 0px;
      .el-form-item {
        margin: 0 0 6px 0;
        .el-form-item__label {
          margin-right: 0;
          padding: 11px 12px 11px 12px;
        }
      }
    }
  }
  li {
    list-style-type: none;
  }
</style>
<template>
  <!-- *****已卸车******-->
  <div class="div-wrap">
    <!-- 搜索begin -->
    <el-col>
      <el-form label-position="right" label-width="100px">
        <el-row :data="searchForm">
          <el-col :span="8">
            <el-form-item label="订单日期" >
              <el-date-picker
                style="width: 90%"
                v-model="searchForm.submitTime"
                type="daterange"
                align="right"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号" >
              <el-input  style="width: 220px" v-model="searchForm.orderNumber" placeholder="请输入订单编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输方式" prop="type">
              <el-select v-model="searchForm.agingDictEntityId" style="width: 220px" placeholder="请选择运输方式">
                <el-option
                  v-for="item in $store.getters.AGING_CLASSIFICATION"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :data="searchForm">
          <el-col :span="8">
            <el-form-item label="收货人">
              <el-input  style="width: 220px" v-model="searchForm.sendContactName"
                        placeholder="请输入收货人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人手机">
              <el-input  style="width: 220px" v-model="searchForm.sendContactPhone"
                        placeholder="请输入收货人手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货物名称">
              <el-input  style="width: 220px" v-model="searchForm.cargoName"
                        placeholder="请输入货物名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <!-- 搜索end -->
    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="cancelAffirmWarehousing()">取消入库确认</el-button>
      <el-button type="primary" @click="resetSearchForm()" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchOrderTable()" style="float: right;margin-right: 10px">查询</el-button>
    </el-col>
    <!--操作end-->
    <!--列表-->
    <el-table :data="orderTableData" highlight-current-row border style="width: 100%;" height="100%"
              v-loading="listLoading"
              @sort-change="sortChange"
              @selection-change="selsChange">
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column prop="orderNumber" label="订单编号" width="150" align="center">
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
             @click="orderDetail(scope.row.id)">{{ scope.row.orderNumber}}</a>
        </template>
      </el-table-column>
      <!--<el-table-column prop="orderStatusName" label="订单状态" width="100" align="center">-->
        <!--<template slot-scope="scope">-->
          <!--{{ scope.row.orderStatus > 101001005?"已发运":"待发运"}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column prop="submitTime" label="下单日期" width="120" align="center">
      </el-table-column>
      <el-table-column prop="agingName" label="运输方式" width="100" align="center">
      </el-table-column>
      <el-table-column prop="cargoNames" label="货物名称" width="100" align="center">
      </el-table-column>
      <el-table-column prop="packTypeNames" label="包装" width="100" align="center">
      </el-table-column>
      <el-table-column prop="amountWeightVolume" label="件数|重量|体积" width="200" align="center">
      </el-table-column>
      <el-table-column prop="actualAmountWeightVolume" label="件数|重量|体积(入库)" width="200" align="center">
      </el-table-column>
      <el-table-column prop="affirmName" label="交接人" width="80" align="center">
      </el-table-column>
      <el-table-column prop="affirmTime" label="交接时间" width="120" align="center">
      </el-table-column>
      <el-table-column prop="exceptionTypeName" label="异常类型" width="100" align="center">
        <template slot-scope="scope">
        {{ scope.row.exceptionTypeName == ""?"-":scope.row.exceptionTypeName}}
        </template>
      </el-table-column>
      <el-table-column prop="sendTypeName" label="送货方式" width="100" align="center">
      </el-table-column>
      <el-table-column prop="sendContactName" label="收货人手机号" width="130" align="center">
        <template slot-scope="scope" style="text-align: center">
          <li>
            {{scope.row.sendContactName}}
          </li>
          <li>
            {{scope.row.sendContactPhone}}
          </li>
        </template>
      </el-table-column>
      <el-table-column prop="orderPrice" label="运费" width="100" align="center">
      </el-table-column>
      <el-table-column prop="paymentTypeName" label="结算方式" width="100" align="center">
      </el-table-column>
      <el-table-column prop="receipt" label="回单" width="100" align="center">
      </el-table-column>
      <el-table-column prop="collectPaymentAmount" label="代收货款" width="100" align="center">
      </el-table-column>
      <el-table-column show-overflow-tooltip fit prop="remark" label="订单备注" min-width="100" align="center">
      </el-table-column>
    </el-table>
    <!--列表工具条-->
    <el-col :span="24">
      <el-pagination class="f-mt10"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     layout="total,sizes,prev, pager, next, jumper"
                     :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <!--订单查看Dialog-->
    <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
      <order-select :title="orderSelectForm"></order-select>
    </el-dialog>
  </div>
</template>
<script>
import {
  getOrderTableDataHs, cancelWarehousingAffirm
} from '../../api/stowage/CustomerDelivery.js';
import { getOrder } from '../../api/order/order';
import OrderSelect from '../order/OrderSelectDialog.vue';
export default {
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      doneUnload: 0,
      token: this.$store.state.token,
      searchConditionLabelWidth: '120px',
      listLoading: false,
      // 查询条件
      searchForm: {
        submitTime: null, // 订单日期
        orderNumber: null, // 订单号
        agingDictEntityId: null, // 运输方式
        sendContactName: null, // 收货人名
        sendContactPhone: null, // 收货人手机号
        cargoName: null// 货物名称
      },
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sels: [],
      sortProp: '',
      sortOrder: 'ascending',
      orderTableData: [],
      orderSelect: false,
      orderSelectForm: {}
    };
  },
  props: {
    title: {}
  },
  watch: {
    // --监听值变化，刷新已卸车页面
    title (val) {
      this.searchOrderTable();
    }
  },
  methods: {
    orderDetail (orderId) {
      getOrder(this.token, orderId).then((res) => {
        if (res.data.successFlg && res.data.obj != null) {
          this.orderSelect = true;
          this.orderSelectForm = res.data.obj;
        } else {
          this.$message.error('订单id有误，查询订单失败！');
        }
      });
    },
    // 刷新待签约或已卸货页面
    setToUnload (toUnload) {
      this.$emit('refreshToUnload', toUnload);
    },
    orderSelectDialog (val) {
      this.orderSelect = true;
      this.orderSelectForm = val;
    },
    // 重置查询条件
    resetSearchForm () {
      this.searchForm.submitTime = null;
      this.$ue.resetObjNull(this.searchForm);
    },
    // 排序改变
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchOrderTable();
    },
    // 多选框
    selsChange (sels) {
      this.sels = sels;
    },
    // --每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchOrderTable();
    },
    // --第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchOrderTable();
    },
    // -- 检索订单信息
    searchOrderTable () {
      let filters = 'NOTEQ_isDelete=111002001;GTE_orderStatus=101001005;EQ_trunkTasks.whetherStorage=true;EQ_extractType=105002002;';
      let sf = this.searchForm;
      for (let s in sf) {
        if (sf[s] == null || sf[s] === undefined || sf[s] === '') { continue; }
        if (s === 'submitTime' && sf[s][0] !== null) {
          let startDate = (sf[s][0]).Format('yyyy-MM-dd');
          let endDate = (sf[s][1]).Format('yyyy-MM-dd');
          filters += 'GTE_' + s + '=' + startDate + ';LTE_' + s + '=' + endDate + ';';
          continue;
        };
        if (s === 'orderNumber') {
          filters += 'LIKE_orderNumber=' + sf[s] + '&group8;LIKE_freightNumber=' + sf[s] + '&group8;LIKE_transportationNumber=' + sf[s] + '&group8;';
          continue;
        };
        if (s === 'agingDictEntityId') {
          filters += 'EQ_' + s + '=' + sf[s] + ';';
          continue;
        };
        if (s === 'sendContactName') {
          filters += 'LIKE_' + s + '=' + sf[s] + ';';
          continue;
        };
        if (s === 'sendContactPhone') {
          filters += 'LIKE_' + s + '=' + sf[s] + ';';
          continue;
        };
        if (s === 'cargoName') {
          filters += 'LIKE_orderCargos.' + s + '=' + sf[s] + ';';
          continue;
        };
      }
      if (filters.substring(filters.length - 1, filters.length) === ';') {
        filters = filters.substring(0, filters.length - 1);
      }
      this.listLoading = true;
      getOrderTableDataHs({
        token: this.token,
        filters: filters,
        sorts: '-createDate',
        size: this.pageSize,
        page: this.currentPage
      }).then((res) => {
        this.listLoading = false;
        if (res.data.successFlg === true && res.data.detailModelList.length > 0) {
          this.orderTableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        } else {
          this.orderTableData = [];
        }
      });
    },
    // 取消入库确认
    cancelAffirmWarehousing () {
      if (this.sels == null || this.sels.length <= 0) {
        this.$message.error('请选择数据！');
        return;
      }
      let selecArrary = this.sels;
      for (let p in selecArrary) {
        let orderStatus = selecArrary[p].orderStatus;
        let orderNumber = selecArrary[p].orderNumber;
        if (orderStatus != null && orderStatus > 101001005) {
          this.$message.error('订单：' + orderNumber + '已经发货，无法进行取消入库确认操作！');
          return;
        }
      }
      let orderIds = this.sels.map(item => item.id);
      console.log(JSON.stringify(this.sels));
      this.$confirm('确认进行接货入库操作', '提示', {
        type: 'warning'
      }).then(() => {
        cancelWarehousingAffirm(this.token, orderIds.join(',')).then((res) => {
          if (res.data.successFlg === true) {
            this.$message.success('确认成功！');
            this.searchOrderTable();
          } else {
            this.$message.error(res.data.errorMsg);
          }
        }).catch(() => {
          this.$message.error('数据有误，操作失败！');
        });
      });
    }
  },
  mounted () {
    this.$store.commit('initDict');
  }
};
</script>
